<template>
  <div class="index">
    <ul style="height:200px;">
      <li class="lis1">
        <div class="div_left1">
          <img src="../image/钱.png" alt />
          <p style="color:#fff;">成交金额</p>
        </div>
        <div class="div_right1">
          <span>4567.89元</span>
        </div>
      </li>
      <li class="lis2">
        <div class="div_left2">
          <img src="../image/留言.png" alt />
          <p style="color:#fff;">留言</p>
        </div>
        <div class="div_right2">
          <span>4567条</span>
        </div>
      </li>
      <li class="lis3">
        <div class="div_left3">
          <img src="../image/购物车.png" alt />
          <p style="color:#fff;">订单</p>
        </div>
        <div class="div_right3">
          <span>4567笔</span>
        </div>
      </li>
      <li class="lis4">
        <div class="div_left4">
          <img src="../image/通知.png" alt />
          <p style="color:#fff;">宝贝通知</p>
        </div>
        <div class="div_right4">
          <span>456条</span>
        </div>
      </li>
      <li class="lis5">
        <div class="div_left5">
          <img src="../image/待处理.png" alt />
          <p style="color:#fff;">待处理</p>
        </div>
        <div class="div_right5">
          <span>17条</span>
        </div>
      </li>
      <li class="lis6">
        <div class="div_left6">
          <img src="../image/待处理.png" alt />
          <p style="color:#fff;">紧急通知</p>
        </div>
        <div class="div_right6">
          <span>10条</span>
        </div>
      </li>
    </ul>

    <el-row :gutter="24" style="height:300px;width:100%;">
      <el-col :span="6">
        <div class="grid-content" style="width:100%;text-align:center;padding:0 10px">
          <ul class="items" style="padding-left:32px;">
            <li class="item">
              <span>{{date.getHours()}}</span>
            </li>
            <li class="item2">:</li>
            <li class="item">
              <span>{{date.getMinutes()}}</span>
            </li>
            <li class="item2">:</li>
            <li class="item">
              <span>{{date.getSeconds()}}</span>
            </li>
          </ul>
          <div class="calendar">
            <ul>
              <li class="calendar_year">{{date.getFullYear()}}年{{date.getMonth()+1}}月</li>
              <li class="calendar_day" style="color:hotpink;">{{date.getDate()}}</li>
              <li class="calendar_week">星期{{this.week}}</li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
          <div class="center">
            <div class="center_father">
              <div class="center_father_left">
                <span class="center_img"></span>
                <el-button type="primary" size="small">进入主页</el-button>
              </div>
              <ul class="center_father_cnter">
                <li>
                  <span>商店名称:</span>
                  <span>妖精的口袋</span>
                </li>
                <li>
                  <span>店铺等级:</span>
                  <span>三级</span>
                </li>
                <li>
                  <span>商城类型:</span>
                  <span>电子商务</span>
                </li>
                <li>
                  <span>销售类型:</span>
                  <span>女性用品</span>
                </li>
              </ul>
              <ul class="center_father_right">
                <li>店铺动态评分:</li>
                <li>
                  <span>相符描述</span>
                  <span>4.5分</span>
                </li>
                <li>
                  <span>服务态度</span>
                  <span>4.0分</span>
                </li>
                <li>
                  <span>发货速度</span>
                  <span>4.6分</span>
                </li>
              </ul>
            </div>
            <div class="center-bottom">
              <el-button size="small">添加产品</el-button>
              <el-button size="small">添加广告</el-button>
              <el-button size="small">添加文章</el-button>
              <el-button size="small">新增单页面</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <ul class="header_right">
            <li style="padding:0 20px">
              <span style="font-size:16px;font-weight: bold;">登录记录</span>
              <span style="font-size:10px;"><strong style="color:hotpink;">+</strong>更多</span>
            </li>
            <li>
              <span>管理员</span>
              <span>2019-08-04 12:45:43</span>
            </li>
            <li>
              <span>管理员</span>
              <span>2019-08-14 12:45:43</span>
            </li>
            <li>
              <span>管理员</span>
              <span>2019-08-24 12:45:43</span>
            </li>
            <li>
              <span>管理员</span>
              <span>2019-09-04 12:45:43</span>
            </li>
            <li style="border-bottom:none">
              <span>管理员</span>
              <span>2019-09-30 12:45:43</span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <div class="footer">
            <h4>店铺/订单状态提示</h4>
            <div class="footer-ones">
              <div class="footer-one">
                <tr class="foot-one">订单&商品</tr>
                <tr>
                  <span>代发货订单</span>
                  <span>(02)</span>
                </tr>
                <tr>
                  <span>已完成订单</span>
                  <span>(32)</span>
                </tr>
                <tr>
                  <span>未完成订单</span>
                  <span>(02)</span>
                </tr>
              </div>
              <div class="footer-one">
                <tr class="foot-one">促销</tr>
                <tr>
                  <span>待审核的促销</span>
                  <span>(02)</span>
                </tr>
                <tr>
                  <span>发布的促销</span>
                  <span>(32)</span>
                </tr>
                <tr>
                  <span>即将结束的促销</span>
                  <span>(02)</span>
                </tr>
              </div>

              <div class="footer-one">
                <tr class="foot-one">售后</tr>
                <tr>
                  <span>待处理订单</span>
                  <span>(02)</span>
                </tr>
                <tr>
                  <span>待退款订单</span>
                  <span>(32)</span>
                </tr>
                <tr>
                  <span>待处理售后单</span>
                  <span>(02)</span>
                </tr>
              </div>

              <div class="footer-one">
                <tr class="foot-one">结算</tr>
                <tr>
                  <span>待支付</span>
                  <span>(02)</span>
                </tr>
                <tr>
                  <span>待结算确认</span>
                  <span>(32)</span>
                </tr>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-light">
          <div class="foot2">
            <h4>商品销售排行</h4>
            <td><span style="margin-left:0px;">排名</span><span style="margin-left:0px;">商品编号</span><span
                style="margin-left:30px;">商品名称</span><span style="margin-left:40px;">销售数量</span></td>
            <tr> <span>1</span> <span>2345776</span> <span>妖精的口袋ins大容量…</span> <span>23</span> </tr>
            <tr> <span>2</span> <span>2345776</span> <span>Mac经典子弹头口红Ru…</span> <span>23</span> </tr>
            <tr> <span>3</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>4</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>5</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>6</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>7</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>8</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>9</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
            <tr> <span>10</span> <span>2345776</span> <span>妖精的口袋小香分格半…</span> <span>23</span> </tr>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name:'index',
    data(){
      return{
        date:new Date(),
        week:""
      }
    },
    mounted() {
        let _this = this;
        this.timer = setInterval(()=>{
            _this.date = new Date()
        },1000)
        this.week = _this.date.getDay()
        if(this.week==1){
            return this.week="一"
        }
        if(this.week==2){
            return this.week="二"
        }
        if(this.week==3){
            return this.week="三"
        }
        if(this.week==4){
            return this.week="四"
        }
        if(this.week==5){
            return this.week="五"
        }
        if(this.week==6){
            return this.week="六"
        }
        if(this.week==0){
            return this.week="日"
        }
    },
    methods: {
      }
    }
</script>
<style lang="scss" scoped>
  .index {
    margin: 0 auto;
    padding-top: 20px;
    width: 96%;
    height:100%;
    box-sizing: border-box;
  }
  li {
    width: 16.6%;
    height: 160px;
    float: left;
    box-sizing: border-box;
    padding: 20px;
    $ulleftBjColor: (#60a7d0, #9cd159, #ff7171, #ff8e68, #ad96d6, #fddf39);
    $ulrightBjColor: (#438eb9, #72b63f, #ff5757, #ff6633, #8775a7, #f5c23d);

    @for $i from 1 to 7 {
      .div_left#{$i} {
        background-color: nth($ulleftBjColor, $i);
        width: 55%;
        height: 140px;
        line-height: 40px;
        float: left;
        text-align: center;
        font-size: 14px;
        padding: 12px 4px;
        box-sizing: border-box;
        img {
          width: 40%;
        }
        p {
          color: #fff;
          font-size: 14px;
        }
      }
      .div_right#{$i} {
        background-color: nth($ulrightBjColor, $i);
        width: 45%;
        height: 140px;
        float: left;
        text-align: center;
        font-size: 16px;
        color: #fff;
        line-height: 140px;
      }
    }
  }
  .grid-content .items {
    width: 100%;
    text-align: center;
  }
  .item {
    border: 1px solid #ddd;
    font-weight: bold;
    font-size: 26px;
    height: 50px;
    line-height: 15px;
    width: 70px;
    margin: 10px 0 20px 5px;
  }
  .item span {
    text-align: center;
  }
  .item2 {
    width: 25px;
    height: 50px;
    font-size: 26px;
    line-height: 30px;
  }

  .calendar {
    float: left;
    display: inline;
    margin-left: 5px;
    border: 1px solid #ddd;
    text-align: center;
    width: 94%;
    height: 160px;
  }
  .calendar_year {
    width: 100%;
    height: 40px;
    background: #ffff0052;
    line-height: 5px;
    font-size: 20px;
    color: #585757;
    border-bottom: 1px solid #ddd;
    text-align: center;
  }
  .calendar_day {
    font-size: 34px;
    width: 100%;
    text-align: center;
    color: #0f90db;
    font-weight: bold;
    font-size: 40px;
    height: 40px;
    line-height: 50px;
  }
  .calendar_week {
    font-size: 21px;
    width: 100%;
    height: 20px;
    line-height: 70px;
    color: #585757;
    text-align: center;
  }
  .center {
    border: 1px solid #ddd;
    height: 240px;
  }
  .center_img {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 20px 0 10px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1427040194,4046161619&fm=26&gp=0.jpg") no-repeat;
    background-size: cover;
  }
  .center_father {
    /* border: 1px solid #ddd; */
    height: 180px;
    border-bottom: 1px solid #ddd;

  }
  .center_father_left {
    width: 130px;
    text-align: center;
    float: left;
    height: 100%;
  }
  .center_father_cnter {
    float: left;
    width: 240px;
    height: 100%;
    color: #888;
    font-size: 13px;
    border-right: 1px solid #ddd;
  }
  .center_father_cnter li {
    width: 100%;
    height: 30px;
    span:last-child {
      margin-left: 40px;
      color: #585757;
    }
  }
  .center_father_right {
    float: left;
    width: 150px;
    height: 100%;
    color: #585757;
    font-size: 13px;
    text-align: center;
  }

  .center_father_right li {
    float: left;
    width: 100%;
    height: 30px;

    span:last-child {
      margin-left: 20px;
    }
  }

  .center-bottom {
    width: 370px;
    line-height: 50px;
    text-align: center;
  }

  .header_right {
    float: left;
    width: 100%;
    height: 240px;
    border: 1px solid #ddd;
    color: #585757;
    font-size: 13px;
    text-align: center;
  }

  .header_right li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 40px 0 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
  }

  .footer {
    width: 100%;
    height: 490px;
    margin-left: 15px;
    border: 1px solid #ddd;
    color: #595757;

    h4 {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      border-bottom: 1px solid #ddd;
    }

    .footer-ones {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
      .footer-one {
        width: 50%;
        line-height: 34px;
        .foot-one {
          font-weight: bold;
          color: #595757;
          margin: 6px 0 10px;
        }
        tr {
          display: flex;
          justify-content: space-between;
          padding: 0 20px 0 50px;
          color: #888;
          span:last-child {
            font-weight: bold;
            color: #ffc0e6;
          }
        }
      }
    }
  }

  .foot2 {
    width: 95%;
    border: 1px solid #ddd;

    h4 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      padding-left: 30px;
      box-sizing: border-box;
    }

    td {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #ddd;
      font-size: 14px;
      background: #f2f2f2;
    }

    tr {
      @extend td;
      background: #fff;
      span:first-child {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: rgb(243, 2, 2);
        text-align: center;
        color: #fff;
        margin-top: 10px;
      }
    }
  }
</style>